<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IOS Clock</title>
    <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
    <div class="box">
        <article class="clock">
            <div class="hours-container">
                <div class="hours"></div>
            </div>
            <div class="minutes-container">
                <div class="minutes"></div>
            </div>
            <div class="seconds-container">
                <div class="seconds"></div>
            </div>
        </article>
    </div>

    <script>
        function clockWalk() {
            const hourHand = document.querySelector('.hours-container');
            const minuteHand = document.querySelector('.minutes-container');
            const secondHand = document.querySelector('.seconds-container');

            const now = new Date();
            const hour = now.getHours();
            const minute = now.getMinutes();
            const second = now.getSeconds();

            const secondDegree = second * 6;
            const minuteDegree = minute * 6;
            const hourDegree = (hour * 30) + (minute / 2);

            hourHand.style.transform = `rotateZ(${hourDegree}deg)`;
            minuteHand.style.transform = `rotateZ(${minuteDegree}deg)`;
            secondHand.style.transform = `rotateZ(${secondDegree}deg)`;
        }
        setInterval(function() {
            clockWalk();
        }, 1000);
    </script>
</body>
</html>